<template>



	<div class="system-dicManager-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1300px">

			<el-card shadow="hover">
				<el-form :model="state.ruleForm" size="default" label-width="80px">
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="字典编码" prop="dicCode">
								<el-input v-model="state.ruleForm.dicCode" placeholder="字典编码" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="字典名称" prop="dicName">
								<el-input v-model="state.ruleForm.dicName" placeholder="字典名称" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="所属服务" prop="belongMicroService">
								<el-select clearable v-model="state.ruleForm.belongMicroService">
									<el-option v-for="item in state.microServiceList" :key="item.dicItemValue"
										:label="item.dicItemName" :value="item.dicItemValue" />
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="状态" prop="status">
								<el-select clearable v-model.number="state.ruleForm.status">
									<el-option v-for="item in state.statusList" :key="item.dicItemValue"
										:label="item.dicItemName" :value="parseInt(item.dicItemValue)" />
								</el-select>
							</el-form-item>
						</el-col>




						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="备注" prop="remark">
								<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 20 }"
									v-model="state.ruleForm.remark" placeholder="备注" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>


			</el-card>

			<el-card style="margin-top: 20px;" shadow="hover">
				<div class="bar_tools">
					<div>数据字典项列表</div>
					<el-button-group class="ml-4">
						<el-button type="primary" size="default" @click="handleAdd()">添加</el-button>
					</el-button-group>
				</div>

				<el-form size="default" label-width="0px">
					<el-table size="default" :data="state.ruleForm.items" row-key="dicItemIdTemp"
						:expand-row-keys="state.expandedRowKeys" @expand-change="funcExpand" max-height="400" border="">
						<el-table-column type="expand">
							<template #default="scope">
								<el-form size="default" label-width="120px">

									<el-row>
										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
											<el-form-item label="扩展属性2">
												<el-input v-model="scope.row.extAttribut2" placeholder="" />
											</el-form-item>
										</el-col>


										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
											<el-form-item label="扩展属性3">
												<el-input v-model="scope.row.extAttribut3" placeholder="" />
											</el-form-item>
										</el-col>


										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
											<el-form-item label="扩展属性4">
												<el-input v-model="scope.row.extAttribut4" placeholder="" />
											</el-form-item>
										</el-col>

										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
											<el-form-item label="扩展属性5">
												<el-input v-model="scope.row.extAttribut5" placeholder="" />
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
											<el-form-item label="修改日期">{{ scope.row.updateDate }}</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
											<el-form-item label="创建日期">{{ scope.row.createDate }}</el-form-item>
										</el-col>
									</el-row>






								</el-form>
							</template>
						</el-table-column>
						<el-table-column label="序号" prop="seq">
							<template #default="scope">
								<el-form-item>
									<el-input-number v-model.number="scope.row.seq" :step="5" step-strictly size="small"
										:min="0" :max="1000" inline></el-input-number>
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="字典项编码">
							<template #default="scope">
								<div>
									<el-form-item>
										<el-input style="width:150" v-model="scope.row.dicItemCode" placeholder="" />
									</el-form-item>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="字典项名称">
							<template #default="scope">
								<el-form-item>
									<el-input v-model="scope.row.dicItemName" type="textarea" placeholder="" />
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="字典项值" prop="dicItemValue">
							<template #default="scope">
								<el-form-item>
									<el-input v-model="scope.row.dicItemValue" placeholder="" />
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="扩展属性1" prop="extAttribut1">
							<template #default="scope">
								<el-form-item>
									<el-input v-model="scope.row.extAttribut1" placeholder="" />
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="语言" prop="language" width="120">
							<template #default="scope">
								<el-form-item>
									<el-select clearable v-model="scope.row.language" width="120">
										<el-option v-for="item in state.languageList" :key="item.value"
											:label="item.name" :value="item.value" autocomplete="on" />
									</el-select>
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="状态" prop="status" width="120">
							<template #default="scope">
								<el-form-item>
									<el-select v-model="scope.row.status" width="100" autocomplete="on"
										value-key="dicItemValue">
										<el-option v-for="item in state.statusList" :key="item.dicItemValue"
											:label="item.dicItemName" :value="parseInt(item.dicItemValue)"
											autocomplete="on" />
									</el-select>
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="100">
							<template #default="scope">
								<el-button-group>
									<el-button type="primary" size="small" v-if="scope.row.dicItemId == null"
										@click="handleRemove(scope.$index)">移除
									</el-button>
								</el-button-group>
							</template>
						</el-table-column>
					</el-table>
				</el-form>
			</el-card>




			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="systemDicDialog">
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';




// 导入接口
import { useSysApi } from "../../../api/sys";


// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);



const state = reactive({
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	ruleForm: {
		dicMasterId: "",
		dicCode: "",
		dicName: "",
		remark: "",
		belongMicroService: "",
		status: "",
		items: [] as any
	},
	expandedRowKeys: [] as any,
	statusList: [] as any,
	microServiceList: [] as any,
	languageList: [
		{ name: "中文", value: "zh_CN" },
		{ name: "English", value: "en_US" }
	],

	menuId: "",
	menuData: [] as any, // 上级菜单数据
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});


const remove = (array: any[], val: any) => {
	const index = array.indexOf(val)
	if (index > -1) {
		array.splice(index, 1)
		return true
	}
	return false
}

const funcExpand = async (row: any, expands: any) => {

	console.log(row)

	if (!remove(state.expandedRowKeys, row.dicItemIdTemp)) {
		state.expandedRowKeys.push(row.dicItemIdTemp)
	}
}


const handleAdd = () => {
	state.ruleForm.items.push({ language: "zh_CN", status: 1, dicItemIdTemp: Math.random() });
}

const handleRemove = (index: any) => {
	state.ruleForm.items.splice(index, 1);
}


// 打开弹窗
const openDialog = async (type: string, row?: any) => {
	if (type === 'edit') {
		console.log(row)
		state.ruleForm.dicMasterId = row.dicMasterId;
		state.ruleForm.dicCode = row.dicCode;
		state.ruleForm.dicName = row.dicName;
		state.ruleForm.remark = row.remark;
		state.ruleForm.belongMicroService = row.belongMicroService;
		state.ruleForm.status = row.status;
		let items = await useSysApi().queryDicItemsById(row.dicMasterId);
		let itemSTemp = [] as any;
		items.forEach((element: any) => {
			element["dicItemIdTemp"] = element.dicItemId;
			itemSTemp.push(element);
		});
		state.ruleForm.items = itemSTemp;
		state.dialog.title = '修改数据字典';
		state.dialog.submitTxt = '修 改';
	} else {
		state.ruleForm.dicMasterId = "";
		state.ruleForm.dicCode =  "";
		state.ruleForm.dicName =  "";
		state.ruleForm.remark =  "";
		state.ruleForm.belongMicroService =  "";
		state.ruleForm.status =  "";
		state.ruleForm.items = [];
		state.expandedRowKeys = [];



		state.dialog.title = '新增数据字典';
		state.dialog.submitTxt = '新 增';
		// 清空表单，此项需加表单验证才能使用
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};


// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = async () => {

	let systemDicMaster = {
		dicMasterId: state.ruleForm.dicMasterId,
		dicCode: state.ruleForm.dicCode,
		dicName: state.ruleForm.dicName,
		remark: state.ruleForm.remark,
		belongMicroService: state.ruleForm.belongMicroService,
		status: state.ruleForm.status,
		items: state.ruleForm.items
	} as any;


	try {
		await useSysApi().dicSaveOrUpdate([systemDicMaster]);
		ElMessage.success("操作成功");
		closeDialog(); // 关闭弹窗
		emit('refresh');
	} catch (error: any) {
		ElMessage.error("操作失败请稍后再试");
	}







	// closeDialog(); // 关闭弹窗
	// emit('refresh');
	// if (state.dialog.type === 'add') { }
	// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
};



const selectDicItemsByDicCode = async () => {
	state.statusList = await useSysApi().selectDicItemsByDicCode("commStatus", "General");
	state.microServiceList = await useSysApi().selectDicItemsByDicCode("microServiceList", "General");
}


watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {
			// 获取字典状态编码
			selectDicItemsByDicCode();
		}
	}, { immediate: true }
);




// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss">
.el-select {
	width: 100% !important;
}



.system-dicManager-dialog-container {
	.bar_tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-table__expanded-cell {
		padding: 20px;
	}
}
</style>